.page{
  height: 500vh;
}
.top-bg {
  position: relative; /* 设置为相对定位，以便user-tab可以绝对定位在其上方 */
  width: 100%;
  height: 340rpx;
  //border: 1px solid #00B9FE;
  border-radius: 0 0 40% 40%;

  //border-radius: 50% 20% / 10% 40%;

  //border-bottom-left-radius: 50%;
  //border: black 10px double;
  //background-clip: content-box;

  overflow: hidden; /* 确保user-tab不会超出top-bg的边界 */
}

.body {
  box-sizing: border-box;
  padding: 24rpx;
}

.user-tab {
  position: absolute; /* 绝对定位，使其可以放置在top-bg的上方 */
  top: 15%; /* 根据需要调整，以实现部分重叠 */
  left: 10%; /* 根据需要调整，以实现部分重叠 */
  width: 80%;
  height: 200rpx;
  background-color: #ffff;
  //border: 1px solid #00B9FE;
  z-index: 2; /* 设置z-index确保user-tab在top-bg上方 */
  border-radius: 20rpx;
  opacity: 0.9;
  box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4),
  -7px -7px 12px rgba(255, 255, 255, 0.9);

  &::after{
    content: " ";
    height: 100%;
    width: 100%;
    position: absolute;
    //background-color: red;
    background-image: url('https://winwin-public.oss-cn-hangzhou.aliyuncs.com/%E5%8A%A8%E6%80%81%E8%83%8C%E6%99%AF.png');
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.3;
  }

  .user-info {
    display: flex;
    justify-content: space-around;
    align-content: flex-start;
    padding: 30rpx;
  }

  .user-info-container {
    .user-nickname {
      font-size: 40rpx;
      font-weight: bold;
      color: #000000;
      margin-left: 20rpx;
    }

    .desc-info {
      margin-top: 10rpx;
      margin-left: 20rpx;
    }
  }

  .user-func-login {
    display: flex;
    flex-direction: column;
    justify-content: right;

    .bt-mg {
      margin-bottom: 25rpx;
    }
  }
}

//功能tabs
.list-tab {
  margin-top: 100rpx;
  // 消费合约
  .agree_nav,
  .server_nav,
  .other_nav {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
  }

  .login_nav {
    margin-top: 200rpx;
  }

  .agree_nav {
    display: flex;
    flex-direction: column;

    .title {
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .list {
      display: flex;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 1;

        image {
          width: 48rpx;
          height: 48rpx;
        }

        text {
          margin-top: 12rpx;
          font-size: 24rpx;
        }
      }
    }
  }

  .server_nav,
  .other_nav {
    display: flex;
    background-color: #fff;
    flex-direction: column;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;

      .left {
        display: flex;
        align-items: center;

        image {
          margin-left: 10rpx;
        }

        text {
          font-weight: bold;
          font-size: 28rpx;
          color: #333;
          margin-left: 24rpx;
        }

        .icon {
          font-size: 36rpx;
        }
      }
    }
  }

  .avatar {
    margin: 8px;
  }

  .avatar-custom {
    margin: 8px;

    image {
      width: 40px;
      height: 40px;
    }
  }

}
